<template>
	<view>
		<Nvagats :images="img"></Nvagats>
		<view class="container">
			<view class="roll_toptitle">
				{{data.name}}
			</view>
			<view class="roll_tx">
				<image style="width: 100%;height: 100%;" :src="data.user.avatar" mode=""></image>
			</view>
			<view class="roll_come" :class="{ 'ended': data.status_alias === '已结束', 'joined': data.status_alias !== '已结束' && isJoined }" @click="onrollcome">
				
			</view>
			<view class="roll_wz">
				<view class="wz_top">
					<view class="wz_left">
						<view class="wz_text">道具总数:<span class="wz_number">{{data.awards.length}}</span></view>
					</view>
					<view class="wz_right">
						<view class="wz_text">总金额:<image class="wz_coin" src="https://img.jingkakeji.com/img/static/lucky/mony.png" mode="aspectFit"></image><span class="wz_number">{{data.award_bean}}</span></view>
					</view>
				</view>
				<view class="wz_btm">
					<view class="wz_info">{{data.describe || 'ROLL房信息描述'}}</view>
					<view class="wz_time">开奖时间: {{data.end_time}}</view>
				</view>
			</view>
			<view class="roll_tab">
				<view class="tab-item" :class="{ active: currentTab === 0 }" @click="switchTab(0)">
					<view class="tab-inner">{{ data.status_alias === '已结束' ? '获奖名单' : 'Roll奖池' }}</view>
				</view>
				<view class="tab-item" :class="{ active: currentTab === 1 }" @click="switchTab(1)">
					<view class="tab-inner">参与人员</view>
				</view>
			</view>
			<view class="roll_list" :class="{ 'users-few': currentTab === 1 && data && data.users && data.users.length <= 3, 'users-many': currentTab === 1 && data && data.users && data.users.length > 3 }">
				<!-- Roll奖池列表 / 获奖名单 -->
				<view class="roll_item" v-for="(item, index) in (data && data.awards || [])" :key="index" v-if="currentTab === 0">
					<!-- 未结束状态：显示奖池物品 -->
					<template v-if="data.status_alias !== '已结束'">
						<view class="roll_items">
							<image class="roll_item_cover" :src="item.box_record.cover" mode=""></image>
							<view class="item-info">
								<view class="item-quality">{{item.box_record.dura_alias}}</view>
								<view class="item-name">{{item.box_record.name}}</view>
							</view>
						</view>
						<view class="roll_monys">
							<view class="money_text"><image class="wz_coin" src="https://img.jingkakeji.com/img/static/lucky/mony.png" mode="aspectFit"></image>{{item.bean}}</view>
						</view>
					</template>
					
					<!-- 已结束状态：显示获奖用户信息 -->
					<template v-else>
						<view class="roll_items" :class="{ 'mine': currentUserId && item.box_record && item.box_record.user && item.box_record.user.id === currentUserId }">
							<image class="roll_item_cover" :src="item.box_record.cover" mode="aspectFit"></image>
							<view class="item-info">
								<view class="item-quality">{{item.box_record.dura_alias}}</view>
								<view class="item-name">{{item.box_record.name}}</view>
							</view>
						</view>
						<view class="roll_monys" :class="{ 'mine': currentUserId && item.box_record && item.box_record.user && item.box_record.user.id === currentUserId }">
							<view class="money_text"><image class="wz_coin" :src="item.box_record.user.avatar" mode="aspectFit"></image>{{item.box_record.user.name}}</view>
						</view>
					</template>
				</view>
				
				<!-- 参与人员列表 -->
				<view v-if="!data.users || data.users.length === 0" class="no_users" v-show="currentTab === 1">
					<view class="no_users_text">暂无参与人数</view>
				</view>
				<view class="user_item" v-for="(user, index) in (data && data.users || [])" :key="index" v-if="currentTab === 1">
					<view class="user_avatar">
						<image :src="(user && user.user && user.user.avatar) || 'https://img.jingkakeji.com/img/static/default-avatar.png'" mode="aspectFill"></image>
					</view>
					<view class="user_name">{{(user && user.user && user.user.name) || '未知用户'}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getRoomsDetail,
		getRoomsJoin
	} from "../../../api/pk/pk.js"
	import {
		getUsetInof
	} from "../../../api/login.js"
	import Nvagats from "../../../Component/navgatsmy/navgatsmy.vue"
	export default {
		data() {
			return {
				img:"https://img.jingkakeji.com/img/static/Roll.png",
				data:[],
				currentTab: 0,
			ids:"",
			currentUserId: "",
			isJoined: false,
			}
		},
		components:{
			Nvagats
		},
		onLoad(options) {
			this.ids=options.id
			this.onrolls(options.id)
			this.getUsetInofs()
		},
		methods: {
		async getUsetInofs(){
				let res= await getUsetInof()
				console.log(res,"users")
				if(res && res.code == 200 && res.data){
					this.currentUserId = res.data.id || ""
					this.updateJoinState()
				}
			},

		// 根据当前用户是否在参与人员中，更新加入按钮背景
		updateJoinState(){
			try{
				if(this.data && this.data.status_alias !== '已结束' && this.data.users && Array.isArray(this.data.users)){
					this.isJoined = this.data.users.some(u => (u && u.user && u.user.id) === this.currentUserId)
				}else{
					this.isJoined = false
				}
			}catch(e){
				this.isJoined = false
			}
		},
			// 检查网络状态
			checkNetwork() {
				return new Promise((resolve, reject) => {
					uni.getNetworkType({
						success: (res) => {
							if (res.networkType === 'none') {
								uni.showToast({
									title: '网络连接失败，请检查网络设置',
									icon: 'none',
									duration: 2000
								})
								reject(new Error('网络连接失败'))
							} else {
								resolve(true)
							}
						},
						fail: () => {
							uni.showToast({
								title: '网络状态检查失败',
								icon: 'none',
								duration: 2000
							})
							reject(new Error('网络状态检查失败'))
						}
					})
				})
			},
			
			// 参与ROLL房
		  async	onrollcome(){
				try {
					// 检查网络状态
					await this.checkNetwork()
					
					let data={
						id:this.data.id,
						password:""
					}
					let res=await getRoomsJoin(data)
					console.log(res,"join response")
					
					if(res && res.code == 200){
						uni.showToast({
							title: res.message || '参与成功',
							icon: 'success',
							duration: 2000
						})
						// 刷新数据
						await this.onrolls(this.ids)
					}else{
						uni.showToast({
							title: (res && res.message) || '参与失败',
							icon: 'none',
							duration: 2000
						})
					}
				} catch (error) {
					console.error("参与ROLL房失败:", error)
					// if (error.message === '网络连接失败' || error.message === '网络状态检查失败') {
					// 	return // 网络错误已在checkNetwork中处理
					// }
					uni.showToast({
						title: "您已加入该房间!",
						icon: 'none',
						duration: 2000
					})
				}
			},
			
			// 获取ROLL房详情
			async onrolls(ids){
				try {
					// 检查网络状态
					await this.checkNetwork()
					
					let id=ids
					let res= await getRoomsDetail(id)
					console.log(res,"roll detail response")
					
					if(res && res.code == 200){
						// 数据验证和初始化
						this.data = res.data || {}
						
						// 确保必要的数据结构存在
						if (!this.data.awards) {
							this.data.awards = []
						}
						if (!this.data.users) {
							this.data.users = []
						}
						
						// 验证每个award的user字段
						if (this.data.awards && Array.isArray(this.data.awards)) {
							this.data.awards.forEach(award => {
								if (!award.user) {
									award.user = {
										avatar: 'https://img.jingkakeji.com/img/static/default-avatar.png',
										name: '未知用户'
									}
								}
							})
						}
						
						// 验证每个user的user字段
						if (this.data.users && Array.isArray(this.data.users)) {
							this.data.users.forEach(user => {
								if (!user.user) {
									user.user = {
										avatar: 'https://img.jingkakeji.com/img/static/default-avatar.png',
										name: '未知用户'
									}
								}
							})
						}
						
						// 拉取详情后更新加入状态
						this.updateJoinState()
					} else {
						uni.showToast({
							title: (res && res.message) || '获取数据失败',
							icon: 'none',
							duration: 2000
						})
					}
				} catch (error) {
					console.error("获取ROLL房详情失败:", error)
					if (error.message === '网络连接失败' || error.message === '网络状态检查失败') {
						return // 网络错误已在checkNetwork中处理
					}
					uni.showToast({
						title: '获取数据失败，请重试',
						icon: 'none',
						duration: 2000
					})
				}
			},
			switchTab(index) {
				this.currentTab = index;
			}
		}}
</script>

<style lang="scss">
	.container {
	  min-height: 100vh;
	  background-color: #1a1a2e;
	  background-image: url("https://img.jingkakeji.com/img/static/roll/rollbj.png");
	  background-size: cover;
	  // background-position: center 100rpx;
	  color: #fff;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	}
		
	.roll_toptitle{
		// background: aqua;
		font-size: 40rpx;
		margin-top: 92rpx;
	}
	.roll_tx{
		width: 168rpx;
		height: 168rpx;
		border-radius: 20rpx;
		overflow: hidden;
		margin-top: 98rpx;
	}
	.roll_come{
		width: 360rpx;
		height: 80rpx;
		margin-top: 116rpx;
		background: url("https://img.jingkakeji.com/img/static/roll/comes.png");
		background-size: cover;
	}
	
	.roll_come.ended {
		background: url("https://img.jingkakeji.com/img/static/roll/jieshu.png");
		background-size: cover;
	}

	/* 进行中且已参与的样式 */
	.roll_come.joined{
		background: url("https://img.jingkakeji.com/img/static/roll/jiaru.png");
		background-size: cover;
	}
	.roll_wz{
		width: 692rpx;
		height: 266rpx;
		margin-top: 44rpx;
		background: url("https://img.jingkakeji.com/img/static/roll/rollwzbg.png");
		background-size: cover;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.wz_top{
		width: 90%;
		height: 104rpx;
		border-bottom: 1px solid #ccc;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.wz_btm{
		width: 90%;
		height: 150rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 20rpx 0;
	}
	
	.wz_info {
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 1.4;
		margin-bottom: 16rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 100%;
	}
	
	.wz_time {
		font-size: 22rpx;
		color: #FBDC3B;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 100%;
	}
	.wz_left, .wz_right {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
	}
	
	.wz_text {
		font-size: 28rpx;
		color: #FFFFFF;
		text-align: center;
	}
	
	.wz_number {
		color: #FBDC3B;
		font-weight: 500;
	}
	
	.wz_coin {
		width: 24rpx;
		height: 24rpx;
		margin-left: 8rpx;
		margin-right: 8rpx;
		vertical-align: middle;
	}
	.roll_tab{
		width: 78vw;
		height: 65rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 36rpx;
	}
	
	.tab-item {
		width: 284.5rpx;
		height: 64rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: url("https://img.jingkakeji.com/img/static/roll/rolltab.png");
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		transition: all 0.3s ease;
	}
	
	.tab-item.active {
		background: url("https://img.jingkakeji.com/img/static/roll/rollactive.png");
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}
	
	.tab-inner {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #FFFFFF;
		transition: all 0.3s ease;
	}
	
	.tab-item.active .tab-inner {
		color: #7869DA;
		font-weight: 500;
	}
	.roll_list{
		width: 696rpx;
		height: 854rpx;
		background: url("https://img.jingkakeji.com/img/static/roll/rolllists.png");
		background-size: cover;
		background-repeat: no-repeat;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-content: flex-start;
		padding: 20rpx;
		// margin-top: 40rpx;
		overflow-y: auto;
		overflow-x: hidden;
	}
	
	/* 参与人员列表特殊布局 - 少量人员时从左到右排列 */
	.roll_list.users-few {
		justify-content: flex-start;
	}
	
	/* 当参与人员较多时，使用平均分布 */
	.roll_list.users-many {
		justify-content: space-around;
	}
	
	.roll_item {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 10rpx;
		margin-top: 30rpx;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}
	
	.roll_items{
		width: 202rpx;
		height: 184.47rpx;
		overflow: hidden;
		// border-radius: 8rpx;
		background: url("https://img.jingkakeji.com/img/static/roll/listbg.png");
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		position: relative;
	}

	/* 已结束且是当前用户的项，背景换为草绿，并添加微光 */
	.roll_items.mine{
		background: url("https://img.jingkakeji.com/img/static/roll/caoli.png");
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		box-shadow: 0 0 12rpx rgba(233, 169, 87, 0.6), 0 0 24rpx rgba(220, 119, 55, 0.35);
	}

	.roll_item_cover{
		position: absolute;
		width: 152rpx;
		height: 114rpx;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: block;
	}
	
	.item-info {
		position: absolute;
		bottom: 8rpx;
		left: 8rpx;
		right: 8rpx;
		display: flex;
		flex-direction: column;
		gap: 4rpx;
	}
	
	.item-quality {
		font-size: 18rpx;
		color: #FFFFFF;
		// background: rgba(0, 0, 0, 0.6);
		padding: 2rpx 6rpx;
		border-radius: 4rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		line-height: 1.2;
	}
	
	.item-name {
		font-size: 16rpx;
		color: #FFFFFF;
		// background: rgba(0, 0, 0, 0.6);
		padding: 2rpx 6rpx;
		border-radius: 4rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		line-height: 1.2;
	}
	
	/* 获奖用户信息样式 */
	.winner-info {
		display: flex;
		align-items: center;
		padding: 10rpx;
		width: 100%;
		height: 100%;
		background: url("https://img.jingkakeji.com/img/static/lucky/zulucky.png");
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}
	
	.winner-avatar {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 15rpx;
		flex-shrink: 0;
	}
	
	.winner-avatar image {
		width: 100%;
		height: 100%;
	}
	
	.winner-name {
		flex: 1;
		font-size: 24rpx;
		color: #FFFFFF;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-weight: 500;
	}
	
	.roll_monys{
		width: 202rpx;
		height: 56rpx;
		background: #7869DA;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 0 0 8rpx 8rpx;
	}

	/* 已结束且是当前用户的价格条，改为金橙渐变并添加微光（左右下） */
	.roll_monys.mine{
		background: linear-gradient(to bottom, #E9A957, #DC7737);
		box-shadow: 0 0 10rpx rgba(233, 169, 87, 0.55), 0 6rpx 12rpx rgba(220, 119, 55, 0.35);
	}
	
	.money_text {
		font-size: 24rpx;
		color: #FBDC3B;
		font-weight: 500;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.money_text .wz_coin {
		width: 24rpx;
		height: 24rpx;
		margin-right: 8rpx;
		vertical-align: middle;
	}
	
	/* 参与人员列表样式 - 使用与roll_item相同的布局 */
	.user_item {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 10rpx;
		
	}
	
	.user_avatar {
		width: 86rpx;
		height: 86rpx;
		// border-radius: 50%;
		overflow: hidden;
		border: 2rpx solid #7869DA;
	}
	
	.user_avatar image {
		width: 100%;
		height: 100%;
	}
	
	.user_name {
		font-size: 22rpx;
		color: #FFFFFF;
		margin-top: 12rpx;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		max-width: 120rpx;
	}
	
	.no_users {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 200rpx;
	}
	
	.no_users_text {
		font-size: 28rpx;
		color: #999;
	}
</style>